<template>
  <div class="nav">
    <div class="w-list">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>区域名称</span>
        </div>
        <div class="card-box">
          <div class="box-top">
            <div class="item">
              <div class="img">
                <img src="../../../../assets/img/img-7.png" alt="" srcset="">
              </div>
            </div>
            <div class="item">
              <div class="text-box">
                <div class="text">
                  <div class="box1"><span style="color:#42B983;font-size:18px">100</span>次</div>
                  <div>当日告警事件</div>
                </div>
                <div class="text">
                  <div class="box1">
                    <span style="color:#42B983;font-size:18px">100</span>%
                  </div>
                  <div>在线率</div>
                </div>
              </div>

            </div>
            <div class="item">
              <div class="text-box">
                <div class="text">
                  <div class="box1">
                    <span style="color:#EE6826;font-size:18px">35.0</span>%
                  </div>
                  <div>报警率</div>
                </div>
                <div class="text">
                  <div class="box1">
                    <span style="color:#999999;font-size:18px">00.0</span>%
                  </div>
                  <div>离线率</div>
                </div>
              </div>

            </div>
          </div>
          <div class="box-footer">
            <div class="box">运行状态</div>
            <div class="box">
              <i class="secure iconfont icon-zhanghuanquan" />
              正常</div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="w-list">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>区域名称</span>
        </div>
        <div class="card-box">
          <div class="box-top">
            <div class="item">
              <div class="img">
                <img src="../../../../assets/img/img-7.png" alt="" srcset="">
              </div>
            </div>
            <div class="item">
              <div class="text-box">
                <div class="text">
                  <div class="box1"><span style="color:#42B983;font-size:18px">100</span>次</div>
                  <div>当日告警事件</div>
                </div>
                <div class="text">
                  <div class="box1">
                    <span style="color:#42B983;font-size:18px">100</span>%
                  </div>
                  <div>在线率</div>
                </div>
              </div>

            </div>
            <div class="item">
              <div class="text-box">
                <div class="text">
                  <div class="box1">
                    <span style="color:#EE6826;font-size:18px">35.0</span>%
                  </div>
                  <div>报警率</div>
                </div>
                <div class="text">
                  <div class="box1">
                    <span style="color:#999999;font-size:18px">00.0</span>%
                  </div>
                  <div>离线率</div>
                </div>
              </div>

            </div>
          </div>
          <div class="box-footer">
            <div class="box">运行状态</div>
            <div class="box">
              <i class="secure iconfont icon-zhanghuanquan" />
              正常</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.nav{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .w-list{
    width: 24%;
    display:flex;
    margin-bottom: .625rem;
    margin-right: 1%;
    .box-card {
      width: 100%;
      .text {
        font-size: 14px;
      }
      .item {
        margin-bottom: unset;
      }
      .clearfix:before,
      .clearfix:after {
        display: table;
        content: "";
      }
      .clearfix:after {
        clear: both
      }
      .card-box{
        .box-top{
          width: 100%;
          height: 8.125rem;
          display: flex;
          flex-wrap: wrap;
          .item{
            width: 32%;
            height: 100%;
            .img{
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              img{
                width: 100px;
                height: 100px;
                display: block;
              }
            }
            .text-box{
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              flex-direction: column;
              justify-content: center;
            }
            .text{
              width: 100%;
              text-align: center;
              div{
                font-weight:400;
                color:rgba(34,34,34,1);
                width: 100%;
                font-size: .8125rem;
              }
              .box1 span{
                font-weight: 600;
                margin-right: 2px;
              }
            }
            .text:nth-of-type(1){
              margin-bottom: 10px;
            }
          }
        }
        .box-footer{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content:space-between;
          .box{
            font-size: 12px;
            font-family:FZHei-B01S;
            font-weight:400;
            color:rgba(73,78,86,1);
            .secure{
              color: #1F95EF;
            }
          }
        }
      }
    }
  }
}
</style>
<style>
.w-list .el-card__header{
  padding: 7px 20px !important;
  background-color: #ECEDF0;
}
.el-card__body{
  padding: 10px 20px;
  background-color: #F4F6FA;
}
</style>
